<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>父子组件间的传值</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<counter :count="0" @change="handleChange"></counter>
		<counter :count="1" @change="handleChange"></counter>
		<div>{{total}}</div>
	</div>
	<script>
		var counter = {
			props:['count'],
			data:function(){
				return {
					number:this.count
				}
			},
			template:"<div @click='handleClick'>{{number}}</div>",
			methods:{
				handleClick:function(){
				
					this.number++
					this.$emit('change',1);
				}
			}
		}
		var vm = new Vue({
			el:"#root",
			data:{
				total:1
			},
			components:{
				counter : counter
			},
			methods:{
				handleChange:function(index){
						this.total+=index
				}
			}

		});
	</script>
</body>
</html>